<template>
  <view>
    <l-background color="#ffffff" />
    <view class="input-box flex-row align-center">
      <text class="tbb-search text-30 color-t1 flex-row flex-center margin-right-10" />
      <input
        v-model="keyword"
        :focus="true"
        type="text"
        class="text-30 flex-item"
        placeholder="关键词搜索"
        placeholder-class="text-t3"
        confirm-type="search"
        @input="mapSearch"
        @confirm="mapSearch"
      >
    </view>
    <view class="">
      <view
        v-for="item in list"
        :key="item.id"
        class="padding-30"
        @tap="handleSelect(item)"
      >
        <view class="flex-column">
          <text class="text-30 color-t1">{{ item.name }}</text>
          <text class="text-24 color-t3">{{ item.address }}</text>
        </view>
      </view>
      <view v-if="loading" class="margin-top-20 text-center">
        <text class="text-30 color-t3">加载中...</text>
      </view>
      <l-no-data v-if="noResult" text="您搜索的地点不存在或者超出了范围" type="search" />
    </view>
  </view>
</template>

<script>
import { mapMutations } from 'vuex'
import { mapSearch } from '../index'
export default {
  data() {
    return {
      location: '',
      keyword: '',
      loading: false,
      noResult: false,
      list: []
    }
  },
  onLoad({ location }) {
    this.location = location
  },
  methods: {
    // 位置搜索
    mapSearch() {
      if (!this.keyword) return
      this.list = []
      this.noResult = false
      this.loading = true
      mapSearch(this.keyword, this.location).then(data => {
        this.list = data
        this.loading = false
        if (!this.list.length) {
          this.noResult = true
        }
      }).catch(() => {
        this.noResult = false
        this.loading = false
      })
    },
    // 选择地点
    handleSelect(item) {
      this.setSelectedSearch(item)
      this.setSelectedLocation(null)
      this.jump()
    },
    ...mapMutations({
      setSelectedLocation: 'order/setSelectedLocation',
      setSelectedSearch: 'order/setSelectedSearch'
    })
  }
}

</script>

<style lang="scss" scoped>
.input-box{
  @include position(sticky,$top:0);
  box-shadow: $box-shadow;
}
</style>
